<template>
  <swiper>
    <swiper-slide>
      <div class="iconList">
        <div class="icon">
          <div class="iconfont img">&#xe637;</div>
          超市
        </div>
        <div class="icon">
          <div class="iconfont img">&#xe65d;</div>
          生鲜果蔬
        </div>
        <div class="icon">
          <div class="iconfont img">&#xe6a0;</div>
          乳制品
        </div>
        <div class="icon">
          <div class="iconfont img">&#xe608;</div>
          粮油副食
        </div>
        <div class="icon">
          <div class="iconfont img">&#xe6a1;</div>
          送药上门
        </div>
        <div class="icon">
          <div class="iconfont img">&#xe616;</div>
          个洗家清
        </div>
        <div class="icon">
          <div class="iconfont img">&#xe601;</div>
          母婴
        </div>
        <div class="icon">
          <div class="iconfont img">&#xe6b4;</div>
          酒水饮品
        </div>
        <div class="icon">
          <div class="iconfont img">&#xe602;</div>
          零食
        </div>
        <div class="icon">
          <div class="iconfont img">&#xe692;</div>
          手机家电
        </div>

      </div>
    </swiper-slide>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper.min.css";
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  setup () {

  },
}
</script>

<style lang="scss" scoped>
.iconList {
  display: flex;
  flex-wrap: wrap;
  .icon {
    width: 20%;
    height: 0;
    overflow: hidden;
    padding-bottom: 17%;
    text-align: center;
    font-size: 0.12rem;
    .img {
      margin-top: 0.08rem;
      // margin: 0 auto;
      font-size: 0.3rem;
    }
  }
}
</style>